<!--  -->
<template>
  <div class="category-list">
    <CategoryHeader @changeListStyle="listStyeFn" />
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10"
    >
      <div class="list-tabs">
        <ul>
          <li
            :class="activeIndex==index?'active':''"
            v-for="(listTab,index) in listTabs"
            :key="index"
            @click="changeListTab(index,listTab.upDown,listTab.sort)"
          >
            {{listTab.title}}
            <i
              :class="!listTab.upDown?'iconfont icon-below-s':'iconfont icon-top-s'"
              v-if="listTab.showIcon"
            ></i>
          </li>
          <li @click="showHideMaskFn">
            <i class="iconfont icon-shaixuan"></i> 筛选
          </li>
        </ul>
      </div>
      <div class="cate-list" :class="flag?'cate-list2':''">
        <List :categoryListDatas="categoryListDatas" :isLoading="isLoading" />
      </div>
    </div>
    <transition name="hg">
      <div class="mask" v-if="showMask" @click="hideMask">
        <div class="content" @click.stop="showMaskFn">
          <h2>价格区间</h2>
          <div class="price-wrap">
            <input type="text" placeholder="最低价" v-model="min" />-
            <input type="text" placeholder="最高价" v-model="max" />
          </div>
          <h2>品牌</h2>
          <ul class="brandList">
            <li
              v-for="(brandListData,index) in brandListDatas"
              :key="index"
              :class="brand.includes(brandListData.brand_id)?'active':''"
              @click="addBrandFn(index,brandListData.brand_id)"
            >{{brandListData.brand_name}}</li>
          </ul>
          <div class="mask-footer">
            <div @click="resetFn">重置</div>
            <div @click.stop="searchPrice">确定</div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import CategoryHeader from "./CategoryHeader";
import List from "./CateList";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    CategoryHeader,
    List,
  },
  computed: {
    categoryListDatas() {
      return this.$store.state.categoryListDatas;
    },
    isLoading() {
      return this.$store.state.isLoading;
    },
    brandListDatas() {
      return this.$store.state.brandListDatas;
    },
  },
  data() {
    //这里存放数据
    return {
      listTabs: [
        {
          id: 1,
          title: "综合",
          showIcon: true,
          sort: "goods_id",
          upDown: false,
        },
        {
          id: 2,
          title: "新品",
          showIcon: false,
          sort: "last_update",
          upDown: false,
        },
        {
          id: 3,
          title: "销量",
          showIcon: false,
          sort: "sales_volume",
          upDown: false,
        },
        {
          id: 4,
          title: "价格",
          showIcon: true,
          sort: "shop_price",
          upDown: false,
        },
      ],
      flag: false,
      showMask: false,
      activeIndex: 0,
      cat_id: "",
      page: 0,
      size: 10,
      sort: "goods_id",
      order: "desc",
      min: "",
      max: "",
      brand: [],
    };
  },
  methods: {
    listStyeFn(data) {
      console.log(data);
      this.flag = data;
    },
    showHideMaskFn() {
      this.showMask = !this.showMask;
    },
    changeListTab(index, icon, sort) {
      this.page = 1;
      this.$store.state.categoryListDatas = [];
      this.listTabs[index].upDown = !icon;
      this.activeIndex = index;
      if (this.listTabs[index].showIcon) {
        if (icon) {
          this.order = "desc";
        } else {
          this.order = "asc";
        }
      }
      console.log(sort);
      this.sort = sort;
      this.getCateListFn();
    },
    getCateListFn() {
      var params = {
        cat_id: this.cat_id,
        size: this.size,
        page: this.page,
        sort: this.sort,
        order: this.order,
        min: this.min,
        max: this.max,
        brand: this.brand,
      };
      this.$store.dispatch("actChangeCategoryListDatas", params);
    },
    searchPrice() {
      this.$store.state.categoryListDatas = [];
      this.getCateListFn();
      this.showMask = false;
    },
    loadMore() {
      console.log("321");
      this.page++;
      this.getCateListFn();
    },
    hideMask() {
      this.showMask = false;
    },
    showMaskFn() {
      this.showMask = true;
    },
    addBrandFn(index, bid) {
      if (!this.brand.includes(bid)) {
        this.brand.push(bid);
      } else {
        console.log(this.brand.indexOf(bid));
        var i = this.brand.indexOf(bid);
        this.brand.splice(i, 1);
      }
    },
    resetFn() {
      this.brand = [];
      this.min = "";
      this.max = "";
    },
  },
  mounted() {
    this.cat_id = this.$route.params.cat_id;
    console.log(this.$route.params.cat_id);
    this.$store.dispatch("actChangeBrandListDatas", {
      cat_id: this.cat_id,
    });
  },
};
</script>
<style lang="less">
.hg-enter,
.hg-leave-to {
  transform: translateX(100%);
}
.hg-enter-active,
.hg-leave-active {
  transition: all 0.5s linear;
}
.category-list {
  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    .content {
      width: 90%;
      background: #fff;
      height: 100%;
      position: absolute;
      right: 0;
      h2 {
        height: 4.4rem;
        line-height: 4.4rem;
        font-size: 1.6rem;
        color: #666;
        text-indent: 1rem;
      }
      .price-wrap {
        margin-left: 1rem;
        input {
          width: 40%;
          height: 3rem;
          text-align: center;
          line-height: 3rem;
          border: 1px solid #efefef;
          border-radius: 1.5rem;
        }
      }
      .brandList {
        width: 100%;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        li {
          width: 30%;
          height: 3rem;
          text-align: center;
          line-height: 3rem;
          border: 1px solid #efefef;
          border-radius: 1.5rem;
          margin: 0.5rem 0;
        }
        .active {
          border: 1px solid #f55;
          background: pink;
        }
      }
      .mask-footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 5rem;
        border-top: 1px solid #ccc;
        display: flex;
        div {
          flex: 1;
          font-size: 1.4rem;
          line-height: 5rem;
          text-align: center;
          &:last-child {
            background: #f55;
            color: #fff;
          }
        }
      }
    }
  }
  .list-tabs {
    width: 100%;
    height: 4rem;
    background: #fff;
    ul {
      height: 4rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
      li {
        flex: 1;
        text-align: center;
        font-size: 1.4rem;
      }
      .active {
        color: #f55;
      }
    }
  }
  .cate-list2 {
    .list {
      width: 100%;
      ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 1rem;
        li {
          width: 100%;
          background: #fff;
          margin-bottom: 1rem;
          border-radius: 1rem;
          overflow: hidden;
          height: 11rem;
          display: flex;
          img {
            width: 9rem;
            height: 9rem;
            margin: 1rem;
          }
          .title {
            margin-top: 1rem;
          }
        }
      }
    }
  }
}
</style>